<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <div id="app">
            <!-- 1. 直接拼接 -->
            <h2>{{firstName}} {{lastName}}</h2>
            <!-- 2. 调用方法 -->
            <h2>{{getFullName()}}</h2>
            <!-- 3. 计算属性 -->
            <h2>{{fullName}}</h2>
        </div>
    </head>
    <body>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({ 
                el: '#app',
                data: {
                    firstName: 'kobe',
                    lastName: 'Bryant'
                },
                methods: {
                    getFullName: function() {
                        return this.firstName + ' ' + this.lastName
                    }
                },
                computed: {
                    fullName: function() {
                        return this.firstName + ' ' + this.lastName
                    }
                },
            })
        </script>
    </body>
</html>